<style scoped lang="scss">

</style>
<template>
  <starTemplateMapWrapper :title="title" :expanded="expanded" :titleStyle="titleStyle" :editable="editable" @expand="expandAction" @remove="$emit('remove')">
    <slot name="title"><span slot="title" :style="titleStyle">{{title}}</span></slot>
    <starJsonObject v-model="value" :fields="fields" :labelStyle="labelStyle" :checkable="checkable" @change="change"></starJsonObject>
  </starTemplateMapWrapper>
</template>

<script>
export default {
  name: "starJsonMap",
  data(){
    return {

    }
  },
  props:{
    title:{
      default:()=>{
        return 'title';
      }
    },
    titleStyle:{
      default:()=>{
        return {};
      }
    },
    expanded:{
      default:()=>{
        return true;
      }
    },
    editable:{
      default:()=>{
        return false;
      }
    },
    value: {
      default: () => {
        return {}
      }
    },
    labelStyle: {
      default: () => {
        return {};
      }
    },
    fields: {
      default: () => {
        return [];
      }
    },
    checkable: {
      default: () => {
        return false;
      }
    },
  },
  watch:{

  },
  methods:{
    expandAction(expand){
      this.$emit('expand',expand);
    },
    change(){
      this.$emit('change',this.value);
    }
  }
}
</script>